<script setup>
import { ref, reactive, watch } from "vue";
import { onReachBottom, onShow } from "@dcloudio/uni-app";
import { request } from "@/common/http";
import { ApiUrl } from "@/common/ApiUrl";
import { Toast, jumpPage } from "@/utils";
import { stat } from "fs";

const state = reactive({
	/* 当前登录的用户信息 */
	userInfo: {},
	/* 接口请求参数 */
	params: {
		/* 当前页码 */
		page: 1,
		/* 每页显示条数 */
		limit: 10,
		/* 当前登录的用户ID */
		uid: null,
		/* 审批状态 */
		status: null,
		/* 总页数 */
		pageCount: 1,
	},
	/* 提现记录列表 */
	withdrawRecordList: [],
	/* 是否打开审核弹窗 */
	showAuditStatus: false,
	/* 审核状态 */
	auditStatus: [
		[
			{ text: "待审核", value: 0 },
			{ text: "审核失败", value: 2 },
			{ text: "审核通过", value: 3 },
		]
	],
	/* 当前选择的审核状态 */
	auditText: "",
	/* 提现状态 */
	withdrawStatus: {
		0: "待审核",
		2: "审核失败",
		3: "审核通过"
	},
	/* 审核弹窗 */
	showAudit: false,
	/* 审核状态 */
	checkboxStatus: [
		{ name: "审核通过", value: 3 },
		{ name: "审核不通过", value: 2 },
	],
	checkboxValue: "审核通过",
	auditParams: {
		/* 提现记录ID */
		id: null,
		/* 审核状态 */
		status: 3,
		/* 审核不通过原因 */
		reason: null,
	}
})

onShow(() => {
	const user = JSON.parse(uni.getStorageSync("user"));
	state.userInfo = user.userInfo;
	state.params.uid = state.userInfo.id;
	/* 获取提现记录列表数据 */
	getWithdrawRecordList();
})

/* 上拉加载 */
onReachBottom(() => {
	state.params.page++;
	if (state.params.page < state.params.pageCount + 1 && (state.params.pageCount != 1)) {
		/* 获取提现记录列表数据 */
		getWithdrawRecordList();
	} else {
		/* 没有数据了 */
	}
})

/* 审核按钮点击事件 */
const handleAudit = (item) => {
	state.auditParams.id = item.id;
	state.auditParams.status = 3;
	state.showAudit = true;
	state.checkboxValue = "审核通过";
}

/* 审核状态弹窗确定按钮点击事件 */
const handleAuditStatusConfirm = (e) => {
	const item = e.value[0];
	state.auditText = item.text;
	state.params.status = item.value;
	state.showAuditStatus = false;
	handleReset();
	/* 获取提现记录列表数据 */
	getWithdrawRecordList();
}

/* 审核状态单选框点击事件 */
const handleRadioGroupChange = (name) => {
	state.auditParams.reason = "";
	state.checkboxStatus.find(item => {
		if (item.name == name) {
			state.auditParams.status = item.value;
		}
	})
}

/* 审核弹窗确定按钮点击事件 */
const handleAuditPopupConfirm = () => {
	if (state.auditParams.status == 2 && !state.auditParams.reason) return Toast("请填写审核不通过原因");
	request({
		url: `${ApiUrl.auditWithdrawal}`,
		method: "post",
		data: {
			...state.auditParams
		}
	}).then(res => {
		if (res.code === 200) {
			Toast("提交成功");
			state.showAudit = false;
			state.withdrawRecordList = [];
			getWithdrawRecordList();
		} else {
			Toast(res.message, "error");
		}
	})
}


/* 重置数据 */
const handleReset = () => {
	state.params.page = 1;
	state.withdrawRecordList = [];
}

/* 获取提现记录列表数据 */
const getWithdrawRecordList = () => {
	request({
		url: `${ApiUrl.findWithdrawalList}`,
		method: "post",
		data: {
			...state.params
		}
	}).then(res => {
		if (res.code === 200) {
			state.withdrawRecordList = state.withdrawRecordList.concat(res.data.list);
			state.params.pageCount = res.data.totalPage;
		} else {
			Toast(res.message, "error");
		}
	})
}
</script>

<template>
  <view class="withdraw_record">
		
		<view class="form">
			<view class="form-item" @click="state.showAuditStatus = true">
				<view class="label">审核状态</view>
				<view class="arrow">
					<span>{{ state.auditText ? state.auditText : "请选择" }}</span>
					<image src="/static/image/form/right_arrow.png" mode="widthFix" />
				</view>
			</view>
		</view>
		
		<view v-if="state.withdrawRecordList.length > 0" class="withdraw_list">
			<view class="withdraw_item" v-for="(item, index) in state.withdrawRecordList" :key="item.id">
				<view class="withdraw_header">
					<view class="name">提现金额：{{ item.amount }}元</view>
				</view>
				<view class="withdraw_body">
					<view class="left">
						<view class="r_row status">
							<text>申请状态：</text>
							<text :class="{ 'success': item.status == 3, 'fail': item.status == 2 }">{{ state.withdrawStatus[item.status]}}</text>
						</view>
						<view class="r_row">
							<text>申请时间：</text>
							<text>{{ item.applyTime }}</text>
						</view>
						<view class="r_row">
							<text>手续费：</text>
							<text>{{ item.feeRate }}元</text>
						</view>
					</view>
					<image v-if="item.status == 3" src="/static/image/user/pass.png" mode="aspectFill"/>
					<image v-if="item.status == 2" src="/static/image/user/reject.png" mode="aspectFill" />
				</view>
				<view v-if="state.params.uid == 1 && item.status == 0" class="btn_audit" @click="handleAudit(item)">审核</view>
			</view>
		</view>
		
		<view v-else class="no_data">暂无数据</view>
		
		<!-- 审核状态弹窗 -->
		<u-picker
			:show="state.showAuditStatus"
			:columns="state.auditStatus"
			@cancel="state.showAuditStatus = false"
			@confirm="handleAuditStatusConfirm" />
			
		<!-- 审核弹窗 -->
		<u-popup :show="state.showAudit" mode="center" :round="16">
			<view class="audit_popup">
				<view class="title">提现审核</view>
				<view class="row">
					<text class="label">审核状态：</text>
					<u-radio-group v-model="state.checkboxValue" @change="handleRadioGroupChange">
					    <u-radio
								labelSize="12px"
								activeColor="#FF4638"
					      :customStyle="{marginRight: '8px'}"
					      v-for="(item, index) in state.checkboxStatus"
					      :key="item.value"
					      :label="item.name"
					      :name="item.name"
					    >
					    </u-radio>
					  </u-radio-group>
				</view>
				<view v-if="state.auditParams.status == 2" class="row">
					<text class="label">审核不通过原因：</text>
					<textarea v-model.trim="state.auditParams.reason" cols="30" rows="3" placeholder="请输入审核不通过原因"></textarea>
				</view>
				<view class="popup_footer">
					<view @click="state.showAudit = false">取消</view>
					<view @click="handleAuditPopupConfirm">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<style lang="scss">
.withdraw_record {
	box-sizing: border-box;
	padding-top: 120rpx;
	.form {
		width: 750rpx;
		position: fixed;
		top: 0;
		z-index: 99;
		.form-item {
			box-shadow: unset;
			border-top: 2rpx solid #EBEEF1;
			border-bottom: 2rpx solid #EBEEF1;
		}
	}
	.withdraw_list {
		background: #FFFFFF;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
		border-radius: 8rpx 8rpx 0 0;
		width: 686rpx;
		margin: 0 auto;
		.withdraw_item {
			width: 100%;
			box-shadow: inset 0rpx -24rpx 0rpx 0rpx #F8F9FB;
			padding-bottom: 52rpx;
			.withdraw_header {
			  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
			  padding: 22rpx 0;
			  .name {
			    font-size: 28rpx;
			    font-weight: bold;
			    position: relative;
			    margin-left: 26rpx;
					color: #FF9832;
			    &:before {
			      content: '';
			      width: 6rpx;
			      height: 40rpx;
			      position: absolute;
			      left: -26rpx;
			      background: #FF4638;
			      border-radius: 3rpx 3rpx 3rpx 3rpx;
			    }
			  }
			}
			.withdraw_body {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 32rpx 52rpx 12rpx 34rpx;
				border-radius: 0 0 8rpx 8rpx;
				.left {
					flex: 1;
					.r_row {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;
						text {
							font-size: 24rpx;
							line-height: 36rpx;
							color: #969699;
							&:nth-of-type(2) {
								color: #303030;
							}
						}
						&.status {
							text {
								&:nth-of-type(2) {
									&.success {
										color: #25DFA5;
									}
									&.fail {
										color: #FF4638;
									}
								}
							}
						}
					}
				}
				image {
					flex-shrink: 0;
					width: 143rpx;
					height: 112rpx;
				}
			}
			.btn_audit {
				width: 388rpx;
				height: 64rpx;
				border-radius: 32rpx;
				border: 2rpx solid #FF776A;
				font-size: 28rpx;
				line-height: 33rpx;
				color: #FF4638;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto 0;
			}
		}
	}
	.no_data {
		font-size: 24rpx;
		line-height: 36rpx;
		color: #969699;
		text-align: center;
		margin-top: 24rpx;
	}
	
	.audit_popup {
		padding: 40rpx 0 0;
		width: 686rpx;
		.title {
			font-weight: 500;
			font-size: 32rpx;
			line-height: 38rpx;
			letter-spacing: 1px;
			color: #353535;
			text-align: center;
		}
		.row {
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;
			margin: 28rpx 0;
			text {
				margin-right: 20rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				color: #353535;
				&.label {
					display: block;
					width: 200rpx;
					text-align: right;
				}
			}
			checkbox {
				transform: scale(0.6);
				transform-origin: left;
			}
			label {
				font-size: 24rpx;
			}
			textarea {
				flex: 1;
				font-size: 24rpx;
				line-height: 28rpx;
				border: 2rpx solid rgba(#999999, 0.5);
				box-sizing: border-box;
				padding: 20rpx;
				margin: 20rpx 0 50rpx;
			}
		}
		.popup_footer {
			width: 100%;
			height: 112rpx;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			view {
				height: 100%;
				flex: 1;
				font-weight: 500;
				font-size: 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				&:last-child {
					color: #FF4638;
					border-left: 2rpx solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
}
</style>